<template>
  <PageMain :hide-header="true">
    <template #body>
      <div 
        class="fliter-box m-[8px_24px] w-[calc(100%_-_48px)] box-border overflow-hidden"
        :style="{ height }"
      >
        <a-form :model="filterModel">
          <a-row>
            <a-col :span="8">
              <a-form-item label="">
                <a-input v-model="filterModel.account" placeholder="请输入用户账号" allow-clear @clear="getData">
                  <template #prefix>用户账号</template>
                  <template #suffix>
                    <icon-search class="cursor-pointer" @click="getData"/>
                  </template>
                </a-input>
                <a-button @click="expendHeader = !expendHeader" class="ml-2">
                  <template #icon>
                    <icon-filter />
                  </template>
                </a-button>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              
            </a-col>
            <a-col :span="8" class="flex justify-end items-center p-[0_!important]">
              <a-button type="primary" @click="add">新增</a-button>
            </a-col>
          </a-row>
          <div class="w-full h-[72px] overflow-hidden box-border p-[20px_24px] mt-[16px] bg-[#F7F9FC]" v-if="expendHeader">
            <a-row>
              <a-col :span="8">
                <a-form-item label="">
                  <a-input v-model="filterModel.username" placeholder="请输入用户名称">
                    <template #prefix>用户名称</template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                
                <a-form-item label="">
                  <a-input v-model="filterModel.org_name" placeholder="请输入所属组织">
                    <template #prefix>所属组织</template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8" class="pr-[0px_!important]">
                <a-form-item label="">
                  <div class="w-full h-full flex justify-between items-center">
                    <a-select v-model="filterModel.type" placeholder="请选择" clear @change="getData">
                      <template #prefix>类型</template>
                      <a-option value="政府部门">政府部门</a-option>
                      <a-option value="平台公司">平台公司</a-option>
                      <a-option value="企业公司">企业公司</a-option>
                      <a-option value="企业子公司">企业子公司</a-option>
                      <a-option value="律所">律所</a-option>
                      <a-option value="数据评价公司">数据评价公司</a-option>
                      <a-option value="数据评估公司">数据评估公司</a-option>
                    </a-select>
                    <a-link type="primary" @click="clearFilter" class="text-nowrap">重置</a-link>
                  </div>
                  
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
      <div 
        class="list-box w-full h-[calc(100%_-_130px)] overflow-hidden box-border p-[0_24px]"
        :style="{ height:  contentHeight }"
      >
        <a-table 
          :columns="Columns" :data="listData" :pagination="false"
          :scroll="{ x: '110%', y: '100%' }"
        >
          <template #index="{ rowIndex }">{{ rowIndex + 1 }}</template>
          <template #account_status="{ record }">
            <a-tag :color="record.account_status === 1 ? 'green' : 'red'">
              {{ record.account_status === 1 ? '启用' : '禁用' }}
            </a-tag>
          </template>
          <template #operation="{ record }">
            <a-row>
              <a-col :span="6" flex="center">
                <a-link type="primary" @click="edit(record)">编辑</a-link>
              </a-col>
              <a-col :span="12" flex="center">
                <a-link type="primary" @click="relation(record)" >关联信息</a-link>
              </a-col>
              <a-col :span="6" flex="center">
                <a-link type="primary" @click="del(record)">删除</a-link>
              </a-col>
            </a-row>
          </template>
        </a-table>
      </div>
      <div class="page-box w-full h-[46px] p-[0_24px_0px_24px] overflow-hidden box-border flex justify-end items-center">
        <a-pagination 
          :total="page.total" :page-size-options="[10, 20]" 
          show-page-size show-total show-jumper
          @change="handlerPageChange('num', $event)" @page-size-change="handlerPageChange('size', $event)"/>
      </div>
      <popSave 
        :show="popSaveData.key" 
        :title="popSaveData.title" 
        :data="popSaveData.data" 
        @close="handlerSaveDataPopClose" 
        @submit="saveData"
      />

      <a-modal v-model:visible="removePopKey" title-align="start" class="chunk-delete-box">
        <template #title>
          <span style="
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: bold;
          color: #394D73;
          ">
            是否确认删除该资源
          </span>
        </template>
        <div class="chunk-delete-info-box">
          <icon-exclamation-circle-fill style="color: #FFAC38"/>
          <span style="
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: normal;
          color: #465A80;
          ">
            删除后该资源无法恢复
          </span>
        </div>
        <template #footer>
          <div class="w-full h-full flex justify-end items-center">
            <a-button @click="removePopKey = false">取消</a-button>
            <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
          </div>
        </template>
      </a-modal>

    </template>
  </PageMain>
</template>

<script lang=ts setup>
import { computed, onMounted, ref, onUnmounted, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Columns } from './values';
import * as Api from '@/api/user/useManagement';
import * as T from '@/api/user/userManagement_type';
import PageMain from '@/components/PageBox.vue'
import popSave from '../components/saveBox.vue'
import { Message } from '@arco-design/web-vue';
import CryptoJS from 'crypto-js'

const route = useRoute()
const router = useRouter()
const filterModel = ref({
  account: '', // 用户账号
  username: '', // 用户名称
  org_name: '', // 所属组织
  type: '' // 组织类型
})
const page = ref({
  page: 1, 
  page_size: 20, 
  total: 100
})
const listData = ref<T.TUserItem[]>([])
const popSaveData = ref({
  key: false,
  title: '新增账户',
  data: undefined
})
const expendHeader = ref(false)
const height = computed(() => {
  return expendHeader.value ? '120px' : '32px'
})
const contentHeight = computed(() => {
  return expendHeader.value ? 'calc(100% - 188px)' : 'calc(100% - 98px)'
})
const removePopKey = ref(false)
const removeData = ref<any>()

function clearFilter() {
  filterModel.value = {
    account: '', // 用户账号
    username: '', // 用户名称
    org_name: '', // 所属组织
    type: '' // 组织类型
  }
  nextTick(() => {
    getData()
  })
}

function getData() {
  Api.getList(page.value, filterModel.value).then(res => {
    console.log(`[ rs ]=>`, res)
    const {code, data, message, page_size, total} = res as any
    if (res.code === 200 && res.data) {
      listData.value = res.data
      page.value.total = res.total as number
      console.log(`[ page ]=>`, page.value)
    }
  })
}
function handlerPageChange(type: string, val: number) {
  if (type == 'num') {
    page.value.page = val
  }
  if (type == 'size') {
    page.value.page_size = val
    page.value.page = 1
  }
  getData()
}

function handlerSaveDataPopClose() {
  popSaveData.value.key = false
  popSaveData.value.data = undefined
}

function saveData(data: T.TUserItem) {
  data.passwd = CryptoJS.MD5(data.passwd).toString(CryptoJS.enc.Hex).toLowerCase()
  if (popSaveData.value.title.indexOf('编辑') > -1){
    Api.updateUser(data).then(res => {
      const {code, data, message} = res as any
      if (code === 200) {
        getData()
        popSaveData.value.key = false
      } else {
        Message.warning(message)
      }
    })
  } else {
    Api.createUser(data).then(res => {
      const {code, data, message} = res as any
      if (code === 200) {
        getData()
        popSaveData.value.key = false
      }
    })
  }
}

// 新增
function add() {
  popSaveData.value.data = undefined
  popSaveData.value.title = '新增账户'
  popSaveData.value.key = true
}

// 编辑
function edit(record: T.TUserItem) {
  popSaveData.value.data = record as any
  popSaveData.value.title = '编辑账户'
  popSaveData.value.key = true
}

// 关联信息
function relation(record: T.TUserItem) {
  router.push({
    name: 'userManagementRelation',
    params: {
      account: record.account
    },
    query: {
      uname: record.username
    }
  })
}

// 删除
function toRemove() {
  removePopKey.value = false
  Api.deleteUser(removeData.value.account).then(rs => {
    if (rs.code === 200) {
      getData()
      removeData.value = null
      Message.success('删除成功')
      removePopKey.value = false
      return
    }
    Message.warning(`删除失败![${rs.errMsg}]`)
  })

}

// 删除提示
function del(record: T.TUserItem) {
  removePopKey.value = true
  removeData.value = record
}

function watchEnterHandler(e: KeyboardEvent) {
  if (route.name != 'userManagementList') return
  if (e.key === 'Enter') {
    getData()
  }
}

onUnmounted(() => {
  // 移除键盘监听 
  window.removeEventListener('keydown', watchEnterHandler)
})


onMounted(() => {
  window.addEventListener('keydown', watchEnterHandler)
  getData()
});
</script>

<style lang='less' scoped>
.fliter-box{
  .arco-form{
    .arco-row{
      @apply w-full;
      height: 32px;
      &+.arco-row{
        margin-top: 20px;
      }
      .arco-col {
        height:32px; display: flex; align-items: center;
        overflow: hidden; box-sizing: border-box; padding-right: 30px;
        .arco-form-item {
          margin-bottom: 0;
          :deep(.arco-form-item-label-col){
            display: none;
          }
          :deep(.arco-form-item-wrapper-col){
            @apply w-full flex-1;
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.chunk-delete-box{
  .arco-modal-wrapper{
    .arco-modal{
      .arco-modal-header{
        border-bottom: 0!important;
      }
      .arco-modal-footer{
        border-top: 0!important;
      }
    }
  }
}
</style>